import {Component, ReactNode,Fragment, ErrorInfo} from 'react'

// 声明类型
type Iprops = {
    children: ReactNode
}

// 声明状态
type Istate = {
    error:string;
    isErr:boolean
}
class ErrorCom extends Component<Iprops,Istate> {
    state = {
        error:'', // 错误状态
        isErr:false // 错误信息
    }
    // 从错误中派发状态
    static getDerivedStateFromError(error:string):Istate | null {
        if(error){
            return{
                error:error,
                isErr:true
            }
        }
        return null
    }

    // 组件抓取错误
    componentDidCatch(error: globalThis.Error, errorInfo: ErrorInfo): void {
        console.log(error);
        // 把这里的错误信息提交给服务器
        console.log(errorInfo.componentStack);
    }
    render(): ReactNode {
        let {isErr,error} = this.state;
        // 如果发生了错误，进行降级显示
        if(isErr){
            return <h1>页面发生了错误:{error}</h1>
        }else{
            // 没有发生错误，正常显示组件内容
            return this.props.children
        }
        // return(
        //     <Fragment>
        //         {/* <h1>error</h1> */}
        //         {this.props.children}
        //     </Fragment>
        // )
    }
}
export default ErrorCom